<template>
    <div class="login-container">
       <van-nav-bar
        class="app-nav-bar"
        title="登录"
        left-arrow
        @click-left="onClickLeft"
        />

        <!-- 登录表单 -->
        <van-form validate-first>
        <van-cell-group>
        <van-field
            v-model="loginInfo.mobile"
            icon-prefix="toutiao"
            left-icon="shouji"
            placeholder="请输入手机号"
        />
        <van-field
            v-model="loginInfo.code"
            clearable
            icon-prefix="toutiao"
            left-icon="yanzhengma"
            placeholder="请输入验证码"
        >
        <template #button>
            <van-button ref="codeBtn" :disabled="isDisabled" size="small" round type="primary" @click="sendCode">{{ counTimeText }}</van-button>
        </template>
        </van-field>
        
        </van-cell-group>
        </van-form>

        <!-- 登录按钮 -->
        <div class="login-btn-wrapper">
          <van-button class="login-btn" @click="Login" type="info" block>登录</van-button>
        </div>
    </div>
</template>

<script>
import { getMobileCode } from '@/api/user.js'
import { Toast } from 'vant';
export default {
    name: 'LoginIndex',
    data() {
        return {
            loginInfo:{
                mobile: '13911111111',
                code: '679901'
            },
            counTimeText: '发送验证码',
            isDisabled: false, //是否禁用按钮
        };
    },

    mounted() {
        
    },

    methods: {
        // 点击返回到上一个页面
      onClickLeft() {
          this.$router.go(-1)
      },
      async sendCode() {
          console.log('code');
          let  mobileReg = /^1[3|4|5|7|8][0-9]{9}$/ //手机号校验规则
          if(!mobileReg.test(this.loginInfo.mobile)){
              Toast('手机号有误，请重新输入',2000)
              return 
          }
          // 发起请求，获取验证码
          const codeRes = await getMobileCode(this.loginInfo.mobile)
          if(codeRes.status === 200){
              Toast.success('验证码发送成功',2000);
          }else{
              Toast.fail('验证码发送失败,请稍后再次',2000);
          }
          let countTime = 60
          let timer = setInterval(()=>{
              countTime-- 
              this.counTimeText = countTime + '后重新获取'
              this.isDisabled  = true
              if(countTime === 0){
                  clearInterval(timer)
                  countTime = 60
                this.counTimeText = '发送验证码'
                this.isDisabled = false
              }
          },1000)
      },
      // 验证码登录
      Login (){
        let codeReg = /^\d{6}$/
        if(!codeReg.test(this.loginInfo.code)){
            Toast('验证码格式有误。请重新输入！')
            return 
        }
        this.$store.dispatch('user/Login',this.loginInfo)
      }  
    },
};
</script>

<style lang="less" scoped>
.login-container {
    /deep/.van-field__left-icon{
        display: flex;
        align-items:center
    }
    .login-btn-wrapper{
        padding: 26px 16px;
        .login-btn{
            border-radius: 10px;
            background-color: #6bb4fb;
            border: none;
            .van-button__text{
              font-size: 15px;
            }
        }
    }
}
</style>